<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<!-- 登录状态  -->
	<view class="user-head flex-row-center" v-if="state.userInfo" @click="toPersonalInfo">
		<view class="user-head-info flex-row-center">
			<image :src="state.userInfo.avatar" class="ava" mode="aspectFill"></image>
			<text class="user-name">{{state.userInfo.nickname}}</text>
			<!-- 会员标识 -->
			<view class="lv-box flex-row-center">
				<image src="/static/user/vip_icon.png" class="vip-icon" mode=""></image>
				<template>
					<view class="auth-box flex-center" v-if="state.userInfo?.is_authentication==1">
						<image src="@/static/user/y-auth.png" class="auth-icon" mode=""></image>
						<text class="text">认证</text>
					</view>
					<view class="auth-box-n flex-center" v-else>
						<up-icon name="info-circle-fill" color="#A5A6A7" size="22rpx"></up-icon>
						<text class="text">未认证</text>
					</view>
				</template>
			</view>
		</view>
		<view class="option-box">
			<up-icon name="setting" color="#CDCECE" size="32rpx"></up-icon>
		</view>
	</view>
	<!-- 、非登录状态 -->
	<view class="user-head-noLogin flex-row-center" @click="toLogin" v-else>
		<up-avatar size="68rpx" src="" shape="circle"></up-avatar>
		<text class="user-name">您好，请登录</text>
		<up-icon name="arrow-right" color="#CDCECE" size="28rpx"></up-icon>
	</view>
	<!-- 会员卡 -->
	<view class="vip-box">
		<image src="../../static/user/vip_bg.png" class="vip-bg" mode=""></image>
		<view class="vip-card-head flex-row-center">
			<view class="vip-card-head-left">
				<template v-if="state.userInfo?.level">
					<view class="flex-row-center">
						<template>
							<text class="vip-title"
								v-if="state.userInfo.level_name">{{state.userInfo.level_name}}会员</text>
							<text class="vip-title" v-else>初级会员</text>
						</template>
						<up-icon @click="tipShowBtn" name="question-circle" color="#486373" size="28rpx"></up-icon>
					</view>
					<view class="lever-box flex-row-center">
						<up-line-progress height="12rpx" :showText="false" :percentage="levelInfo.percentage"
							activeColor="#FFE4A3" inactiveColor="#486373">
						</up-line-progress>
						<text class="num">{{levelInfo.currentLevel}} / {{levelInfo.nextLevel}}</text>
					</view>
				</template>
			</view>
			<!-- 购买体验卡按钮 -->
			<view class="bay-experience flex-center" @click="buyExperience">
				<text class="text">购买体验卡</text>
			</view>
		</view>
		<view class="vip-info flex-row-center">
			<view class="info-left flex-row-center">
				<!-- 余额 -->
				<view class="num-box flex" @click="toWithdraw">
					<text class="name">余额</text>
					<text class="num" v-if="state.accountInfo"><text class="icon">￥</text>
						{{state.accountInfo.total}}</text>
					<text class="num" v-else><text class="icon">￥</text> 0.00</text>
				</view>
				<view class="charge-btn flex-center" @click="toTopUp">
					<text class="text">充值</text>
				</view>
			</view>
			<!-- 积分 -->
			<view class="num-box flex" @click="toIntegrationList">
				<text class="name">积分</text>
				<text class="num" v-if="state.accountInfo">{{state.accountInfo.score}}</text>
				<text class="num" v-else>0</text>
			</view>
			<!-- 优惠券中心 -->
			<view class="coupon-box flex-center" @click="toCoupon">
				<text class="text">优惠券中心</text>
				<up-icon name="arrow-right" color="#AD987B" size="28rpx"></up-icon>
			</view>
		</view>
	</view>
	<!-- 订单中心 -->
	<!-- <view class="assistant-order w100">
		<text class="title">订单中心</text>
		<view class="order-item-box flex-row-center">
			<view class="order-item flex-center" @click="toOrder(index)" v-for="(item,index) in orderItem" :key="index">
				<view class="icon-box">
					<text :class="item.icon" color="#ABCDDE" size="38rpx"></text>
				</view>
				<text class="text">{{item.text}}</text>
			</view>
		</view>
	</view> -->
	<!-- 功能 -->

	<view class="assistant-order w100" v-for="(items,indexs) in state.functionList" :key="indexs">
		<view class="function-box">
			<template v-for="(item,index) in items" :key="index">
				<button open-type="contact" @contact="contact" v-if="item.type==='contact'">
					<view class="function-item flex-center">
						<!-- <image :src="item.img" class="item-icon" mode=""></image> -->
						<text :class="[item.icon]" :style="{fontSize: item.fontSize}"></text>
						<text class="item-name">{{item.name}}</text>
					</view>
				</button>
				<view @tap="tofunction(item,index)" v-else
					:class="[item.state==-1?'unlocked-box':'function-item','flex-center']">
					<!-- <image :src="item.img" class="item-icon" mode=""></image> -->
					<text :class="item.icon" :style="{fontSize: item.fontSize}"></text>
					<text class="item-name">{{item.name}}</text>
					<image src="/static/user/unlocked_icon.png" v-if="item.state==-1" class="unlocked_icon" mode="">
					</image>
				</view>
			</template>
		</view>
	</view>
	<!-- <view class="function-box">
		<template v-for="(item,index) in state.functionList" :key="index">
			<button open-type="contact" @contact="contact" v-if="item.type==='contact'">
				<view class="function-item flex-center">
					<image :src="item.img" class="item-icon" mode=""></image>
					<text class="item-name">{{item.name}}</text>
				</view>
			</button>
			<view @tap="tofunction(item,index)" v-else
				:class="[item.state==-1?'unlocked-box':'function-item','flex-center']">
				<image :src="item.img" class="item-icon" mode=""></image>
				<text class="item-name">{{item.name}}</text>
				<image src="/static/user/unlocked_icon.png" v-if="item.state==-1" class="unlocked_icon" mode="">
				</image>
			</view>
		</template>
	</view> -->
	<!-- 版权信息 -->
	<copyrightVue></copyrightVue>
	<up-modal :show="tipShow" confirmColor="#7EDE9E" @confirm="()=>tipShow=false" title="提示"
		:content='upgradationTips'></up-modal>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user.js';
	import {
		configInfoStore
	} from '@/stores/config.js';
	const {
		configInfo
	} = configInfoStore();
	import copyrightVue from '@/components/userCenter/copyright.vue';
	const userStore = userInfoStore();
	const props = defineProps({
		userInfo: {
			default: () => null
		},
		accountInfo: {
			default: () => null
		},
	})
	const tipShow = ref(false);
	const orderItem = [{
			icon: 'aliIcon icon-dingdan',
			text: '全部'
		},
		// {
		// 	icon: 'calendar',
		// 	text: '待处理'
		// }, {
		// 	icon: 'error-circle',
		// 	text: '已取消'
		// },
		// {
		// 	icon: 'clock',
		// 	text: '服务中'
		// }, {
		// 	icon: 'checkmark-circle',
		// 	text: '已完成'
		// }
	];
	const state = reactive({
		userInfo: computed(() => props.userInfo),
		accountInfo: computed(() => props.accountInfo),
		functionList: [
			[{
					img: '/static/user/team_icon.png',
					icon: 'aliIcon icon-130',
					url: '/page_user/views/myTeam',
					name: "我的组队",
					fontSize: '52rpx',
					state: 1
				}, {
					img: '/static/user/match_icon.png',
					icon: 'aliIcon icon-saishi',
					name: "我的赛事",
					fontSize: '52rpx',
					url: '/page_activity/views/myMatch',
					state: 1,
				},
				{

					img: '/static/user/match_icon.png',
					icon: 'aliIcon icon-dingdan',
					name: "助教订单",
					url: '/page_user/views/orderCenter',
					fontSize: '52rpx',
					state: 1,
				}
			],
			[{
				img: '/static/user/shop_icon.png',
				icon: 'aliIcon icon-shangjia',
				name: "商家中心",
				fontSize: '52rpx',
				state: 1
			}, {
				img: '/static/user/assistant_icon.png',
				icon: 'aliIcon icon-zhujiao',
				name: "助教中心",
				fontSize: '52rpx',
				state: 1
			}, {
				img: '/static/user/agency_icon.png',
				icon: 'aliIcon icon-dailiren',
				name: "代理中心",
				fontSize: '52rpx',
				type: 'proxy',
				url: '/page_user/views/applyAgency',
				state: 1
			}, ],
			// {
			// 	icon: '/static/user/captain_icon.png',
			// 	name: "队长入驻",
			// 	url: '/page_user/views/captainIn',
			// 	// url: '/page_user/views/captainCenter',
			// 	state: 1
			// },
			// {
			// 	icon: '/static/user/shop_icon.png',
			// 	name: "商家入驻",
			// 	url: '/page_user/views/merchantEnter',
			// 	state: 1
			// }, 
			[{
					img: '/static/user/seat_icon.png',
					icon: "aliIcon icon-mingpian_mingpianjia_",
					url: '/page_user/views/personnel',
					name: "名片管理",
					fontSize: '52rpx',
					state: 1
				}, {
					img: '/static/user/seat_icon.png',
					icon: 'aliIcon icon-icon',
					url: '/page_user/views/userAddress',
					name: "地址管理",
					fontSize: '42rpx',
					state: 1
				}, {
					img: '/static/user/writeOff_icon.png',
					icon: 'aliIcon icon-daihexiao',
					url: '/page_user/views/writeOff',
					name: "核销组队",
					fontSize: '42rpx',
					state: 1
				}, {
					img: '/static/user/promotion_icon.png',
					icon: 'aliIcon icon-yaoqingyouli',
					name: "邀请",
					fontSize: '58rpx',
					url: '/page_user/views/popularization',
					state: 1
				},
				{
					img: '/static/user/contact_icon.png',
					icon: 'aliIcon icon-lianxiwomen',
					name: "联系我们",
					fontSize: '52rpx',
					type: 'contact',
					state: 1
				},
				{
					img: '/static/user/notice_icon.png',
					icon: 'aliIcon icon-gonggao09',
					name: "公告通知",
					fontSize: '52rpx',
					url: '/page_user/views/noticeList',
					state: 1
				},
			],
			[{
				img: '/static/user/ranking_icon.png',
				icon: 'aliIcon icon-paihangbang',
				name: "排行榜",
				fontSize: '52rpx',
				state: -1
			}, 
			// {
			// 	img: '/static/user/register_icon.png',
			// 	icon: 'aliIcon icon-saishi',
			// 	name: "报名比赛",
			// 	fontSize: '52rpx',
			// 	state: -1
			// }, 
			],
		],

	})
	const emit = defineEmits(['changeItem']);
	const levelInfo = reactive({
		currentLevel: computed(() => props.accountInfo?.team_count + props.accountInfo?.match_count) || 0,
		nextLevel: computed(() => userStore.next_level_info?.all_count || 0),
		percentage: computed(() => {
			if (!levelInfo.nextLevel) return 0;
			let percentage = (levelInfo.currentLevel / levelInfo.nextLevel) * 100
			percentage = percentage > 100 ? 100 : percentage
			return percentage
		})
	});
	const upgradationTips = ref(computed(() => configInfo.upgradation_protocal?.value))
	const tipShowBtn = () => {
		tipShow.value = true
	}
	const computePpercentage = () => {
		let percentage = (levelInfo.currentLevel / levelInfo.nextLevel) * 100
		percentage = percentage > 100 ? 100 : percentage
		levelInfo.percentage = percentage
	}
	const tofunction = (item, index) => { //去方法页面
		if (item.state === -1) return
		if (item.name === '公告通知') { //切换身份
			uni.navigateTo({
				url: '/page_user/views/noticeList'
			})
			return
		};
		if (!state.userInfo) {
			uni.$u.toast('请先登录');
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}, 600)
			return
		}
		if (item.name == '助教中心') {
			allNotification(['assistantClose',  'assistantAccept','newAssistant'],
				() => {}); //打开通知
			if (state.userInfo?.is_authentication === 0) {
				uni.$u.toast('请先在个人资料中进行实名认证');
				return;
			};
			if (state.userInfo?.is_assistant === 1) {
				uni.navigateTo({
					url: '/page_assistant/views/assistantCenter'
				})
				return
			} else {
				uni.$u.toast('请先申请成为助教');
				setTimeout(() => {
					uni.navigateTo({
						url: '/page_assistant/views/applyAssistant'
					})
				}, 1000)
				return;
			}
			return
		}

		if (item.name === '商家中心') { //切换身份 
			if (state.userInfo.is_merchant === 1 || state.userInfo.is_store === 1) {
				emit('changeItem', 'shop')
				return
			} else {
				uni.$u.toast('请先注册商家');
				setTimeout(() => {
					uni.navigateTo({
						url: '/page_user/views/merchantEnter'
					})
				}, 800)
				return
			}

		};
		if (item.type && item.type === 'proxy') { //代理
			if (state.userInfo?.is_authentication === 0) {
				uni.$u.toast('请先在个人资料中进行实名认证');
				return;
			};
			if (!state.userInfo?.city) {
				uni.$u.toast('请先在个人资料中填写地址');
				return;
			};
			uni.navigateTo({
				url: '/page_user/views/applyAgency'
			})
			return
		}
		if (item.name === '队长入驻') { //切换身份
			if (state.userInfo?.is_authentication === 0) {
				uni.$u.toast('请先在个人资料中进行实名认证');
				return;
			};
			// 可直接查看
			uni.navigateTo({
				url: '/page_user/views/captainCenter'
			})
			return
			if (state.userInfo.is_captain === 1) {
				uni.navigateTo({
					url: '/page_user/views/captainCenter'
				})
			} else {
				uni.navigateTo({
					url: '/page_user/views/captainIn'
				})
			}
			return
		}
		uni.navigateTo({
			url: item.url
		})
	};
	const toWithdraw = () => { //去提现
		uni.navigateTo({
			url: '/page_user/views/withdraw'
		})
	}
	const toCoupon = () => { //去优惠券中心
		uni.navigateTo({
			url: '/page_user/views/couponCenter'
		})
	}
	const toTopUp = () => { //去重置
		let token = uni.getStorageSync('user_token');
		if (!token) {
			uni.$u.toast('请先登录');
			return;
		}
		uni.navigateTo({
			url: '/page_user/views/topUp'
		})
	}
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	}
	const toPersonalInfo = () => { //查看个人信息
		uni.navigateTo({
			url: '/page_user/views/personalInfo',
		})
	}
	const toIntegrationList = () => { //去积分列表
		let token = uni.getStorageSync('user_token');
		if (!token) {
			uni.$u.toast('请先登录');
			return;
		}
		uni.navigateTo({
			url: '/page_user/views/integrationList'
		})
	};
	const contact = (event) => { //打开客服
		// console.log('打开客服', event);
	};
	const buyExperience = () => {
		let token = uni.getStorageSync('user_token');
		if (!token) {
			uni.$u.toast('请先登录');
			return;
		}
		uni.navigateTo({
			url: '/page_user/views/buyExperience'
		})
	}
	const toOrder = (index) => {
		uni.navigateTo({
			url: '/page_user/views/orderCenter?index' + index
		})
	}
	watch(() => props.userInfo, (newVal) => {
		if (newVal) {
			// if (newVal.is_merchant == 1 || newVal.is_store === 1) {
			// 	state.functionList = state.functionList.filter(item => item.name != '商家入驻');
			// }
		}
	}, {
		immediate: true,
		deep: true
	})
</script>
<style>
	button {
		background-color: transparent !important;
		border: none !important;
	}

	button:after {
		border: none !important;
	}
</style>
<style lang="scss" scoped>
	@import './css/personCenter.less';
	
	.icon-lianxiwomen:before {
		position: relative;
		top: -26rpx;
		display: block;
	}
	
	.icon-lianxiwomen{
		height: 52rpx !important;
	}

	.aliIcon {
		color: #ABCDDE;
		font-size: 52rpx;
	}

	// 认证
	.auth-box {
		margin-left: 18rpx;
		padding: 0 8rpx;
		border-radius: 8rpx;
		border: 1rpx solid #1AC571;
		height: 38rpx;

		.auth-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.text {
			font-size: 20rpx;
			color: #1AC571;
			margin-left: 8rpx;
		}
	}

	.auth-box-n {
		margin-left: 18rpx;
		padding: 0 8rpx;
		border-radius: 8rpx;
		border: 1rpx solid #A5A6A7;
		height: 48rpx;

		.auth-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.text {
			font-size: 24rpx;
			color: #A5A6A7;
			margin-left: 8rpx;
		}
	}
</style>